import { useContext, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { AuthContext } from '@/contexts/authContext';
import { Toaster } from 'sonner';

export default function EntryPage() {
  const { isAuthenticated } = useContext(AuthContext);
  const navigate = useNavigate();

  // 检查用户是否已认证
  useEffect(() => {
    if (isAuthenticated) {
      navigate('/home');
    }
  }, [isAuthenticated, navigate]);

  // 进入首页
  const handleEnter = () => {
    navigate('/home');
  };

  return (
    <div className="min-h-screen w-full flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8 overflow-hidden relative">
       {/* 背景装饰 - 使用用户提供的图片 */}
      <div className="absolute inset-0 z-0">
        {/* 使用用户提供的背景图片 */}
        <div 
          className="absolute inset-0 bg-cover bg-center transition-all duration-1000"
          style={{
            backgroundImage: `url('https://lf-code-agent.coze.cn/obj/x-ai-cn/307173148162/attachment/网页背景_20251023002345.png')`,
          }}
        ></div>
        
        {/* 添加一层轻微的渐变叠加，增强文字可读性 */}
        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-transparent opacity-30"></div>
        
        {/* 星星动画装饰 - 增强童话感 */}
        <div className="absolute inset-0 overflow-hidden">
          {[...Array(20)].map((_, i) => (
            <div
              key={i}
              className="absolute rounded-full bg-white animate-pulse"
              style={{
                width: Math.random() * 3 + 1 + 'px',
                height: Math.random() * 3 + 1 + 'px',
                left: Math.random() * 100 + '%',
                top: Math.random() * 100 + '%',
                opacity: Math.random() * 0.8 + 0.2,
                animationDelay: Math.random() * 5 + 's',
                animationDuration: Math.random() * 3 + 2 + 's',
              }}
            ></div>
          ))}
        </div>
      </div>

      {/* 主要内容 */}
      <div className="z-10 flex flex-col items-center justify-center text-center">
      {/* 登录注册按钮 */}
      <div className="absolute top-16 right-6 md:right-10 flex space-x-3">
        <Link to="/login">
          <button className="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 bg-white/30 backdrop-blur-sm text-pink-700 hover:bg-white/50">
            登录
          </button>
        </Link>
        <Link to="/register">
          <button className="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 bg-gradient-to-r from-pink-500 to-purple-500 text-white hover:from-pink-400 hover:to-purple-400">
            注册
          </button>
        </Link>
      </div>

        {/* Logo和标题 */}
        <div className="mb-8 flex flex-col items-center">
           {/* 中心头像 */}
          <div className="relative mb-6 flex items-center justify-center">
            <img 
              src="https://lf-code-agent.coze.cn/obj/x-ai-cn/307173148162/attachment/e7cb1a9e560c13e8924d04f1d807bc45_20251023000743.jpg" 
              alt="童话家" 
              className="w-40 h-40 rounded-full object-cover shadow-xl"
            />
          </div>
          
          {/* 项目名称 */}
           <h1 className="text-5xl md:text-6xl font-bold mb-2 tracking-tight text-white text-shadow-lg">
            智绘童话AI工场
          </h1>
          
          {/* 副标题 */}
           <p className="text-xl md:text-2xl max-w-lg text-white text-shadow">
             基于AI大模型的童话创作平台
          </p>
        </div>

        {/* 进入按钮 */}
         <button
          onClick={handleEnter}
          aria-label="进入智绘童话AI工场"
          className="mt-12 px-8 py-4 rounded-full text-lg md:text-xl font-bold transition-all duration-300 transform hover:scale-105 hover:shadow-xl bg-white text-pink-500 shadow-lg shadow-pink-400/20">
          <span className="flex items-center">
            <span>点击进入</span>
            <span className="ml-2">🚀</span>
          </span>
        </button>

        {/* 底部装饰文字 */}
        <div className="mt-16 text-sm opacity-90 text-white">
          <p>用AI创造专属于孩子的奇妙故事世界</p>
          <p className="mt-1">适合4-12岁儿童使用</p>
        </div>
      </div>

      {/* 漂浮童话元素 - 增强主题感 */}
      <div className="fixed w-full h-full pointer-events-none z-0 overflow-hidden">
        {[
          { emoji: '🐰', size: 36, delay: 0 },
          { emoji: '🦄', size: 48, delay: 1 },
          { emoji: '🧚‍♀️', size: 32, delay: 3 },
          { emoji: '🌟', size: 28, delay: 4 },
          { emoji: '✨', size: 32, delay: 5 },
        ].map((item, index) => (
          <div
            key={index}
            className={`absolute opacity-60 animate-float-slow hidden lg:block`}
            style={{
              fontSize: `${item.size}px`,
              left: `${Math.random() * 90 + 5}%`,
              top: `${Math.random() * 90 + 5}%`,
              animationDelay: `${item.delay}s`,
            }}
          >
            {item.emoji}
          </div>
        ))}
      </div>

      <Toaster />
    </div>
  );
}